<template>
  <div>
    <VRow>
      <!-- 个人信息 -->
      <VCol cols="12" >
        <VCard>
          <VCardText>
            <VCol cols="12" md="6" offset="3">
              <AppTextField prepend-inner-icon="tabler-search" class="mb-5 mt-5"></AppTextField>
            </VCol>
          </VCardText>
        </VCard>
      </VCol>
      <VCol cols="12">
        <VCard>
          <VCardText>
            <h5 class="text-h5 mb-5">精选专题</h5>
            <VCard
              width="250"
              height="150">
                <VImg
                  aspect-ratio="1"
                  :src="pages1"
                  cover
                />
            </VCard>
            <VCardTitle>AAA</VCardTitle>
          </VCardText>
        </VCard>
      </VCol>
      <VCol cols="12">
        <VDataTableServer :loading="tableLoading" v-model:items-per-page="queryParams.pageSize" v-model:model-value="selectedRows" v-model:page="queryParams.pageNum" v-model="selected" :items="data" item-value="id" :items-length="total" :headers="headers">
          <template v-slot:headers="{ allSelected, someSelected, selectAll }">
          </template>
          <template v-slot:body="{ items }">
            <v-responsive
                  class="overflow-y-hidden overflow-x-hidden"

              >
            <VRow>
              <VCol v-for="item in items">
                    <v-badge class="cursor-pointer" 
                    color="#ffffff" offset-x="20" offset-y="20">
                    <template v-slot:badge>
                      <v-hover>
                        <template v-slot:default="{ isHovering, props }">
                            <VIcon v-bind="props" :icon="(isHovering|| item.collect)?'tabler-heart-filled':'tabler-heart'" 
                            @click="handleCollect(item)" />
                          </template>
                        </v-hover>
                    </template>
                      <VCard
                      width="250"
                      height="250"
                      @click="goDetail(item)">
                        <v-lazy @update:modelValue="loadElementImg(item, 'mall')">
                          <VImg
                          aspect-ratio="1"
                          :src="item.src"
                          cover
                        />
                        </v-lazy>
                      </VCard>
                    </v-badge>
                    
                    <v-tooltip :text="item.title">
                      <template v-slot:activator="{ props }">
                        <VCardTitle v-bind="props" style="text-overflow: ellipsis;overflow:hidden;width: 250px;">{{ item.title }}</VCardTitle>
                      </template>
                    </v-tooltip>
                    <VCardSubtitle>by {{ item.authorName }}</VCardSubtitle>
              </VCol>
            </VRow>
          </v-responsive>
          </template>
          <!-- pagination -->
          <template #bottom>
            <TablePagination v-model:page="queryParams.pageNum" v-model:items-per-page="queryParams.pageSize" :total-items="total" @update:page="getList" @update:items-per-page="getList" />
          </template>
        </VDataTableServer>
      </VCol>
    </VRow>
  </div>
</template>


<script setup>
import AppTextField from "@/@core/components/app-form-elements/AppTextField.vue";
import pages1 from '@images/pages/1.png'
import * as Utils from "@/utils/index";
import { listGalleryMall,collectGallery,cancelCollectGallery } from "@/api/gallery";
import { useRouter } from "vue-router";

const router = useRouter()

const {proxy} = getCurrentInstance()

const queryFormRef = ref()

const queryParams = ref({
  pageNum: 1,
  pageSize: 20,
  isAsc: 'desc',
  orderByColumn: 'createTime',
  sortType:1
});

const handleCollect = async (item) => {
  if (item.collect) {
    await cancelCollectGallery({
      galleryIds: [item.id]
    })
    item.collect = false
    proxy.$toast.success('取消收藏成功')
  } else {
    await collectGallery({
      galleryId: item.id
    })
    item.collect = true
    proxy.$toast.success('收藏成功')
  }
}

const goDetail = (item) => {
  router.push(`gallery-center/detail/${item.id}`)
}


async function loadElementImg(item, type) {
  Utils.loadElementImg(item, type)
}

const handleReset = () => {
  queryFormRef.value.reset()
  // dateTimePicker.value.onClear()
  handleSearch()
}



const handleSearch = () => {
  queryParams.value.pageNum = 1;
  getList();
}



// Data table options
const total = ref(0);
const data = ref([]);
const tableLoading = ref(false);
// Headers
const headers = [
  {
    title: "素材商品",
    key: "galleryInfo",
    sortable: false,
  }
];


function getList() {
  tableLoading.value = true;
  listGalleryMall(queryParams.value).then((res) => {
    data.value = res.rows;
    total.value = res.total;
    tableLoading.value = false;
  });
}
getList();


</script>
